<template>
  <el-dialog v-model="visible" title="设置节点数据" width="500px" :before-close="handleClose">
    <div class="data-select-form">
      <el-form :model="form" label-width="100px" size="default">
        <el-form-item label="选择审核人员:">
          <el-select
            v-model="form.userId"
            multiple
            collapse-tags
            collapse-tags-tooltip
            placement="top-start"
            placeholder="人员来自当前所属部门负责人"
            style="width: 100%"
          >
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核时间:">
          <DateTimePicker v-model="form.auditTime" type="datetimerange" :config="dateTimeConfig" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { getFirstDeptInstructorsService } from '@/api/user'
  import { categoryCP } from '@/types/categoryCp'
  import { userInfoResult } from '@/types/user'
  const options = ref<userInfoResult[]>([])
  interface Props {
    modelValue: boolean
    nodeData?: any
    taskInfo: Partial<categoryCP>
  }
  interface Emits {
    (e: 'update:modelValue', value: boolean): void
    (
      e: 'confirm',
      data: {
        auditTime: [string, string] | null
        userId: string[]
      },
    ): void
  }

  const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    nodeData: () => ({}),
    taskInfo: () => ({}),
  })
  const emit = defineEmits<Emits>()

  const visible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value),
  })

  // 生成 DateTimePicker 的配置
  const dateTimeConfig = computed(() => {
    if (props.taskInfo.startTime && props.taskInfo.endTime) {
      console.log('Generating dateTimeConfig with taskInfo:', props.taskInfo)
      return {
        isEnable: true,
        minTime: props.taskInfo.startTime,
        maxTime: props.taskInfo.endTime,
      }
    }
    return undefined
  })

  // 节点数据
  const form = ref({
    auditTime: ['', ''] as [string, string], // 时间范围数组 [开始时间, 结束时间]
    userId: [] as string[], // 用户ID数组
  })

  // 监听节点数据变化，初始化表单
  watch(
    () => props.nodeData,
    (newData) => {
      if (newData && newData.properties) {
        const { auditTime, userId } = newData.properties
        form.value.auditTime = auditTime || null
        form.value.userId = userId || []
      } else {
        // 重置表单
        form.value.auditTime = null
        form.value.userId = []
      }
    },
  )

  // 处理关闭
  const handleClose = () => {
    visible.value = false
  }

  // 处理确认
  const handleConfirm = () => {
    emit('confirm', {
      auditTime: form.value.auditTime,
      userId: form.value.userId,
    })
    visible.value = false
  }

  // 获取初始下拉选择的数据
  onMounted(() => {
    console.log('Fetching', props.nodeData)
    getFirstDeptInstructorsService(props.taskInfo.departmentId.split(','), props.nodeData?.properties?.value).then((res) => {
      options.value = res
    })
  })
</script>

<style lang="scss" scoped>
  .data-select-form {
    padding: 16px 0;
  }

  .dialog-footer {
    text-align: right;
  }
</style>
